<template>
<view class="page"> 	 
	<view class="contain">
		<template v-if="!loadingState.default">
			<template v-if="!isEmpty">				
				<view class="article-list">
					<navigator url="/package_article/detail/detail" class="item" v-for="(item,index) in 10" :key="10">
						<view class="pic"><image src="@/static/images/image.jpg" mode="widthFix"></image></view>
						<view class="info">
							<view class="title split">瑞丰科技产品在广东省农技总站园区示</view>
							<view class="describe split-line">广东省农业技术推广总站位于广州市天河区柯木朗</view>
							<view class="time">2021-01-05</view>
						</view>
					</navigator>
				</view>
				<loading :loadingState="loadingState"></loading>
			</template>
			<empty v-else>
				<view slot="msg">没有相关信息</view>
			</empty>
		</template>
		<template v-else>
			<loading :loadingState="loadingState"></loading>
		</template>  
	</view> 
</view>
</template>

<script> 
import loading from '@/components/loading-more.vue'  
import empty from '@/components/empty.vue'
export default{
	name:'list',
	data(){
		return {
			isEmpty:false,
			isIphoneX:getApp().globalData.isIphoneX,
			loadingState:{		 
				default:false,
				loading:false,
				completed:true
			}
		}	 
	},
	async onLoad(params) {
		 
	},
	onPullDownRefresh(){
		 
	},
	onReachBottom(){
		 
	},
	methods:{
		 
	},
	components:{ 
		loading, 
		empty
	}
}
</script>

<style lang="less">
.article-list{
	padding-top: 20rpx;
	.item{
		display: flex;
		margin-bottom: 20rpx;
		padding:20rpx;
		background: #fff;
		.pic{
			display: flex;
			justify-content: center;
			align-items: center;
			width:200rpx;
			height:150rpx;
			flex-shrink: 0;
			margin-right: 20rpx; 
			overflow: hidden;
		}
		.info{
			flex-grow: 2;
			max-width: 68%;
			.title{
				margin-bottom: 5rpx;
				font-size: 28rpx;
				font-weight: bold;
			}
			.describe{
				margin-bottom: 5rpx;
				color:#666;
				font-size: 24rpx;
			}
			.time{
				font-size: 24rpx;
				color:#999;
			}
		}
	}
}
</style>
